<div>

  <h3>
    <span>{{l('EditRole')}} </span>
    <span *ngIf="role&&role.isStatic">
      <span>(</span>
      <span style="color:red">static</span>
      <span>)</span>
    </span>
  </h3>


  <nz-spin [nzSpinning]="!role">
    <form nz-form #validateForm="ngForm" (ngSubmit)="save()" *ngIf="role">

      <!-- 角色名称 -->
      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <input nz-input name="name" #name="ngModel" [(ngModel)]="role.name" [placeholder]="l('Name')" [disabled]="role.isStatic"
            required>
          <nz-form-explain *ngIf="name.control.dirty&&name.control.errors">
            <ng-container *ngIf="name.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 角色展示名称 -->
      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <input nz-input name="displayName" #displayName="ngModel" [(ngModel)]="role.displayName" [placeholder]="l('DisplayName')"
            required>
          <nz-form-explain *ngIf="displayName.control.dirty&&displayName.control.errors">
            <ng-container *ngIf="displayName.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 角色介绍 -->
      <nz-form-item>
        <nz-form-control>
          <input nz-input name="description" [(ngModel)]="role.description" [placeholder]="l('RoleDescription')">
        </nz-form-control>
      </nz-form-item>

      <!-- 权限组 -->
      <nz-form-item>
        <nz-checkbox-group name="permissions" [(ngModel)]="permissionList" *ngIf="permissionList.length!=0"></nz-checkbox-group>
      </nz-form-item>

      <!-- 功能按钮 -->
      <div class="custom-modal-footer">
        <div class="custom-modal-footter-group">
          <button nz-button type="button" [disabled]="saving" (click)="close()">
            {{l("Cancel")}}
          </button>
          <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving">
            {{l("Save")}}
          </button>
        </div>
      </div>

    </form>
  </nz-spin>
</div>
